<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" class="swiperImg" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import Swiper from 'swiper'
export default {
  props: ['swiperList'],
  data() {
    return {}
  },
  mounted() {
    /* eslint-disable no-new */
    setTimeout(function() {
      new Swiper('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination',
        autoplay: 2500,
        paginationClickable: true,
        autoplayDisableOnInteraction: false,
        observer: true,
        observerParents: true
      })
    }, 500)
  }
}
</script>

<style lang="less">
.swiperImg {
  display: block;
  height: 100%;
  width: 100%;
}
.swiper-container {
  width: 100%;
  height: 3.5rem;
}
.swiper-pagination .swiper-pagination-bullet {
  background-color: white !important;
}
</style>
